import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'react-router-redux'
import PropTypes from 'prop-types'
import {
  Grid,
  Image,
  Menu,
  Table,
  Checkbox,
} from 'semantic-ui-react'
import DefaultButton from 'components/Button'
import { TableRow, OptionIcon, OptionImage } from 'components/memberTable'
import { project as projectDuck } from 'ducks'

class Members extends Component {
  static propTypes = {
    actionSetActiveTaskTab: PropTypes.func.isRequired,
  }

  componentDidMount = () => {
    const { actionSetActiveTaskTab } = this.props
    actionSetActiveTaskTab('label')
  }

  render() {
    const { goTo, match } = this.props
    return (
      <Grid>
        <Grid.Row>
          <Grid.Column>
            <Menu secondary>
              <Menu.Item fitted>
                <DefaultButton onClick={() => goTo(`${match.url}/new`)}>创建标注任务</DefaultButton>
              </Menu.Item>
            </Menu>
          </Grid.Column>
        </Grid.Row>
        <Grid.Row>
          <Grid.Column>
            <Table basic="very" style={{ marginBottom: '2em' }}>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>
                    <Checkbox />
                  </Table.HeaderCell>
                  <Table.HeaderCell
                    style={{
                      wordBreak: 'keep-all',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    用户名
                  </Table.HeaderCell>
                  <Table.HeaderCell>已完成</Table.HeaderCell>
                  <Table.HeaderCell>未完成</Table.HeaderCell>
                  <Table.HeaderCell>合计</Table.HeaderCell>
                  <Table.HeaderCell />
                </Table.Row>
              </Table.Header>

              <Table.Body>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell collapsing>
                    <Image src="http://xingjing.dudc.org/a21.jpg" rounded size="mini" />
                  </Table.Cell>
                  <Table.Cell>3</Table.Cell>
                  <Table.Cell>67</Table.Cell>
                  <Table.Cell>70</Table.Cell>
                  <Table.Cell className="last-cell" width={2} textAlign="right">
                    <OptionImage className="options" src="https://img.icons8.com/ultraviolet/2x/trash.png" />
                  </Table.Cell>
                </TableRow>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell collapsing>
                    <Image src="http://xingjing.dudc.org/a24.jpg" rounded size="mini" />
                  </Table.Cell>
                  <Table.Cell>5</Table.Cell>
                  <Table.Cell>54</Table.Cell>
                  <Table.Cell>59</Table.Cell>
                  <Table.Cell className="last-cell" width={2} textAlign="right">
                    <OptionImage className="options" src="https://img.icons8.com/ultraviolet/2x/trash.png" />
                  </Table.Cell>
                </TableRow>
              </Table.Body>
            </Table>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

const mapDispatchToProps = {
  actionSetActiveTaskTab: projectDuck.creators.actionSetActiveTaskTab,
  goTo: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(Members)
